﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JooQuery :: Test Space</title>        
    <style>       
        .pointer { cursor: pointer; }
        .square { height: 100px; width: 100px; }
        .bg-red { background-color: Red; }
        .bg-green { background-color: Green; }
        .toggle-off { display: none; }
        .toggle-on { display: block; }        
        .mas { margin:5px; }
        .clonespace{ width:110px; float:left;}
        .pet{ float:left;margin:10px;border:solid 1px black; padding:10px;}        
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
    <script type="text/javascript" src="../scripts/jquery/json2.js"></script>
    <script type="text/javascript" src="../scripts/jquery/livequery.js"></script>
    <script type="text/javascript" src="../scripts/core.js?v=12"></script>
    <script type="text/javascript" src="../scripts/domdata.js?v=1"></script>
    <script type="text/javascript" src="../scripts/events.js?v=1"></script>
    <script type="text/javascript" src="../scripts/log.js?v=1"></script>
    <script type="text/javascript" src="../scripts/bootloader.js?v=12345"></script>    
    <script type="text/javascript" src="../scripts/behaviors.js?v=12345"></script>    
    <script type="text/javascript" src="../scripts/dependencies.js?v=12345"></script> 
    <script type="text/javascript">
        _scriptsRoot = "../Scripts/";    
    </script>
    <script>
        var funkySlide = function () {
            $('.clonespace').each(function (index, clonespace) {
                $('.slider', clonespace).each(function (index2, element) {
                    setTimeout(function () {
                        $(element).enqueueMsg('slideToggle').enqueueMsg('slideToggle').unqueue();
                    }, (200 * index2));
                }); 
            });
        };
    </script>              
</head>
<body>
    <div>
        <p style="float: left; margin: 0px;">
            <a href="CodeDocumentation.htm">Code Documentation</a> | <a href="WorkingBehaviors.htm">Working With Behaviors</a> | <a href="TestSpace.htm">Test Space</a>
            <br />
            <strong>Test Space</strong>
        </p>
        <p style="text-align: right; float: right; display: inline-block; margin: 0px;">
            <a href="http://www.tomdupont.net/">www.tomdupont.net</a><br />
            <a href="http://www.zachmayer.net/">www.zachmayer.net</a></p>
        <div style="clear: both;">
            <br />
        </div>
    </div>
    <div id="slider1" class="square mas slider" data-behavior="Docs.Queueable.Toggler" data-toggle-class="bg-red bg-green">
        <div class="square bg-red pointer" onclick="$('#slider1').msg('toggle')">
        </div>
    </div>
    <div id="slider2" class="square mas slider" data-behavior="Docs.Queueable.Toggler" data-toggle-class="bg-red bg-green">
        <div class="square bg-red pointer" onclick="$('#slider2').msg('toggle')">
        </div>
    </div>
    
</body>
</html>
